<template>
  <PagePanel header="线柱图示例">
    <VisualDarkChart
      class="h-full"
      :loading="chartState.loading"
      :no-data="chartState.noData"
      :options="chartState.options"
    />
  </PagePanel>
</template>

<script lang="ts" setup>
import { PagePanel, VisualDarkChart } from '../components/index'

const chartState = reactive({
  loading: true,
  noData: false,
  options: {
    legend: {
      type: 'scroll',
      bottom: 0,
    },
    grid: {
      top: 30,
      right: 5,
      bottom: 25,
      left: 5,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: ['项1', '项2', '项3'],
    },
    yAxis: {
      type: 'value',
      name: 'YName',
    },
    series: [
      {
        name: '测量维度一',
        data: [13, 24, 34],
        type: 'bar',
      },
      {
        name: '测量维度二',
        data: [23, 14, 54],
        type: 'bar',
      },
      {
        name: '测量维度三',
        data: [23, 34, 34],
        type: 'line',
      },
      {
        name: '测量维度四',
        data: [13, 44, 64],
        type: 'line',
      },
    ],
  },
})

setTimeout(() => {
  chartState.loading = false
  chartState.noData = false
}, 3000)
</script>

<style lang="scss" scoped></style>
